<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.tooltip.css" />

<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.dimensions.min.js"></script>
<script src="jquery.bgiframe.min.js"></script>
<script src="jquery.tooltip.min.js"></script>


<script src="esper2ido.js"></script>

<style>
    .ambiguous {
        color: #a0a000;
    }
    .untranslated {
        color: #800000;
    }
    .unselected {
        color: #a0a0a0;
    }
    .selected {
        color: #000000;
    }
    .fuzzy {
        color: #008000;
    }
</style>

</head>
<body>
Helper service: <span id="service_status"></span>
<br>
Input Esperanto text:<br>
<table>
    <tr>
        <td>
            <textarea id="source" rows="5" cols="80"></textarea>
        </td>
        <td valign="top">
            <button id="go" style="width:150px;height:50px">Translate</button><br>
            <span id="discard_edits" style="display:none"><input type="checkbox" id="discard_edits_cb"><label for="discard_edits_cb"> discard manual edits</label></span>
        </td>
    </tr>
</table>

<br>
<table width="100%">
    <tr>
        <td width="50%" valign="top"> 
            Esperanto:<br>
            <div id="target_e" style="width:480px;height:170px;font-size:14px; border:1px solid black;overflow:scroll"></div>
        </td>
        <td valign="top">
            Ido:<br>
            <div id="target" style="width:480px;height:170px;font-size:14px;border:1px solid black;overflow:scroll"></div>
            <div id="stats"></div>
            <textarea id="target2" rows="10" cols="80" style="display:none"></textarea>
            <button id="edit">Switch to edit</button>
            <button id="view" style="display:none">Switch to view</button>
        </td>
    </tr>
</table>
Click a word to see the dictionary translation to English:
<div id="word_trans" style="width:700px;height:100px;border:1px solid black; font-size:14px;overflow:scroll;"></div>
<br>
<hr>
<br>
Add new word translation:
Esperanto: <input id="word">
Ido: <input id="trans">
POS: <select id="posCode">
<option value="?">Autodetect</option>
<option value="N">Noun</option>
<option value="V">Verb</option>
<option value="ADJ">Adjective</option>
<option value="ADV">Adverb</option>
<option value="P">Preposition</option>
<option value="PRO">Pronoun</option>
</select>
<button id="add_word">Submit</button>
<span id="result"></span>
</body>
</html>
